<template>
	<view>
		<!-- 导航栏 -->
		<view class="nav"><van-nav-bar title="新增客资" left-text="返回" left-arrow @click-left="onClickLeft" @click-right="onClickRight" /></view>
		<view class="content">
			<view class="customer_info">
				<van-field
					readonly
					clickable
					required
					name="picker"
					:value="meTypeTitle"
					label="信息类型"
					placeholder="选择信息类型"
					input-align="right"
					@click="showPicker = true"
					:is-link="true"
					:rules="[]"
				/>
				<van-popup v-model="showPicker" position="bottom">
					<van-picker show-toolbar :columns="newsTypeList" value-key="title" @confirm="chooseMeType" @cancel="showPicker = false" />
				</van-popup>
				<!-- 客资来源 -->
				<van-field
					readonly
					clickable
					required
					name="picker"
					:value="customerData.value"
					v-model="customerData.value"
					label="客资来源"
					placeholder="搜索客资来源"
					input-align="right"
					@click="selectSource()"
					:is-link="true"
				/>
				<!-- 客资来源区域 -->
				<van-field
					v-if="accountCity.length && !showCity"
					readonly
					clickable
					required
					name="picker"
					:value="accountRegionTitle"
					label="区域"
					placeholder="选择来源区域"
					input-align="right"
					@click="showAccountRegion = true"
					:is-link="true"
				/>
				<van-popup v-model="showAccountRegion" position="bottom">
					<van-picker show-toolbar :columns="accountCityPicker" value-key="title" @confirm="chooseAccountCity" @cancel="showAccountRegion = false" />
				</van-popup>
				<!-- 客资来源账号-->
				<van-field
					v-if="accountList.length"
					readonly
					clickable
					required
					name="picker"
					:value="accountTitle"
					label="账户"
					placeholder="选择来源账户"
					input-align="right"
					@click="filterAccount"
					:is-link="true"
				/>
				<!-- 客户姓名 -->
				<van-field v-model="customer_name" label="客户姓名" placeholder="请输入客户姓名" @input="getCustomerName" input-align="right" />
				<!--联系类型  -->
				<van-field
					readonly
					clickable
					required
					name="picker"
					:value="contactTitle"
					label="联系类型"
					placeholder="请选择联系类型"
					input-align="right"
					@click="showContactType = true"
					:is-link="true"
				/>
				<van-popup v-model="showContactType" position="bottom">
					<van-picker show-toolbar :columns="contactWay" value-key="title" @confirm="chooseContactType" @cancel="showContactType = false" />
				</van-popup>
				<van-field required v-model="phone" label="联系电话" placeholder="请输入联系电话" @blur="getCustomerPhone" input-align="right" />
				<van-field v-model="otherPhone" label="其他联系" placeholder="请输入其他联系" @input="getOtherPhone" input-align="right" />
				<!-- 所在城市 -->
				<van-field
					readonly
					clickable
					required
					name="picker"
					:value="regionSelect"
					label="所在城市"
					placeholder="选择所在城市"
					input-align="right"
					@click="showRegion = true"
					:is-link="true"
				/>
				<van-popup v-model="showRegion" position="bottom">
					<van-picker show-toolbar :columns="pickerList" value-key="title" @confirm="chooseRegion" @cancel="showRegion = false" />
				</van-popup>
				<!-- 咨询酒店 -->
				<van-field
					readonly
					clickable
					name="picker"
					:value="holetData.value"
					v-model="holetData.value"
					label="咨询酒店"
					placeholder="请搜索"
					input-align="right"
					@click="selectHotel()"
					:is-link="true"
				/>
				<!-- 桌数 -->
				<van-row>
					<van-col span="17"><van-field type="digit" v-model="table1" label="桌数" placeholder="请输入" @input="getTable1" input-align="right" /></van-col>
					<van-col span="2"><view class="centerLine">-</view></van-col>
					<van-col span="5"><van-field type="digit" v-model="table2" placeholder="请输入" @input="getTable2" /></van-col>
				</van-row>
				<view class="form_line"><view class="line_bottom"></view></view>
				<!-- 预算 -->
				<van-row>
					<van-col span="17"><van-field type="digit" v-model="money1" label="预算" placeholder="请输入" @input="getMoney1" input-align="right" /></van-col>
					<van-col span="2"><view class="centerLine">-</view></van-col>
					<van-col span="5"><van-field type="digit" v-model="money2" placeholder="请输入" @input="getMoney2" /></van-col>
				</van-row>
				<view class="form_line"><view class="line_bottom"></view></view>
				<!-- 婚期 -->
				<van-field readonly clickable name="calendar" :value="weddingDate" label="婚期" placeholder="选择日期" @click="showCalendar = true" input-align="right" />
				<van-calendar v-model="showCalendar" :min-date="minDate" :max-date="maxDate" @confirm="confirmWeddingData" color="#406CEB" />
				<!-- 备注 -->
				<van-field v-model="remark" rows="2" autosize label="备注" type="textarea" placeholder="请输入备注" input-align="right" @input="getRemark" />

				<!-- 待定 -->
				<!-- 门店列表 -->
				<view class="shop_list" v-show="holetList.length >= 1">
					<scroll-view :scroll-y="true" class="shop_mian">
						<view class="shop_title" @click="clickHolet(item)" v-for="(item, index) in holetList" :key="index">{{ item.title }}</view>
					</scroll-view>
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<van-goods-action>
			<van-goods-action-icon />
			<van-goods-action-button text="提交" @click="saveCustomer" color="#406CEB" :disabled="isDisabled" />
			<van-goods-action-icon />
		</van-goods-action>

		<uni-popup ref="popups" type="dialog" style="z-index: 999;">
			<uni-popup-dialog
				type="input"
				message="成功消息"
				title="提示"
				content="是否要保存本次修改的信息？"
				:duration="2000"
				confirmText="确定"
				cancelText="取消"
				:before-close="true"
				@close="closes"
				@confirm="confirms"
			></uni-popup-dialog>
		</uni-popup>
		<!-- 筛选弹层 -->
		<filterMask ref="filterMask" :parent="_self" :showFilter="showFilter" :dataList="dataList" :filterType="filterType"></filterMask>
	</view>
</template>

<script>
var data;
import dictionary from '@/utils/dictionary.js';
import wzpPicker from '@/component/wzp-picker/wzpPicker.vue';
import navigation from '@/component/navigation.vue';
import timeSelector from '@/component/wing-time-selector/wing-time-selector.vue';
import filterMask from '@/component/filter-mask/filter-mask.vue';
import sun from '@/utils/sun.js';
export default {
	components: {
		navigation,
		timeSelector,
		wzpPicker,
		filterMask
	},
	data() {
		let accountPickerList = dictionary.getPicker('account');
		let newsTypeList = dictionary.getPicker('newsTypeList');

		return {
			isDisabled: false, //保存按钮是否禁用
			messageIndex: 0, //信息索引
			newsTypeList: newsTypeList, //信息类型
			messageId: '', //信息类型id
			region: '', //地区
			regionArry: [[], []],
			timesIndex: [0, 0],
			city: '', //城市
			zone: [], //区域
			isShow: true,
			weddingDate: '', //婚礼日期
			holetData: {
				value: '',
				id: ''
			}, //预约门店
			holetList: [], //酒店列表
			customerData: {
				value: '',
				id: ''
			}, //客资
			customerList: [], //客资列表
			customer_name: '', //客户姓名
			phone: '', //联系电话
			otherPhone: '', //其他联系
			table1: '', //桌数
			table2: '', //桌数
			money1: '', //预算
			money2: '', //预算
			remark: '', //备注

			pickerValue: '',
			mode: '',
			pickerList: [], //所在城市picker
			defaultIndex: [],
			accountPickerList: accountPickerList, //从本地获取的账号列表
			accountSourceList: [], //和选择的来源id匹配后的账号列表
			accountCity: [], //匹配来源后的城市列表 只有城市id
			accountCityPicker: [], //匹配来源后的城市列表 为picker使用
			accountCityIndex: 0, //来源区域索引
			accountList: [], //匹配来源和城市后的账号列表
			showCity: false,
			account_city_id: '',
			account_id: '',
			showPicker: false,
			meTypeTitle: '', //信息类型picker当前选择的类型
			showRegion: false, //所在城市picker显示
			regionSelect: '', //所在区域当前选择
			regionIndex: 0, //选择城市索引
			zoneIndex: 0, //选择区域索引
			showCalendar: false, //婚期日历显示
			maxDate: new Date(2052, 0, 1), // 日期可选的最大日期
			minDate: new Date(2021, 0, 1), //日历可选择的最小日期
			showAccountRegion: false, //客资来源区域picker显示
			accountRegionTitle: '', //当前选择的客资来源区域
			showAccount: false, //客资来源账户picker显示
			accountTitle: '', //当前选择客资来源账户名称
			contactWay: [
				{
					type: 1,
					title: '电话'
				},
				{
					type: 2,
					title: '微信'
				}
			],
			contactTitle: '电话', //联系方式类型名称
			contact_type: 1, //联系方式类型\
			showContactType: false, //联系方式picker显示
			showFilter: false, //控制搜索弹窗显示
			filterType: '',
			dataList: [],
			souceList: [], //客资来源列表
			hotelList: [] //酒店列表
		};
	},
	created() {
		this.getSourceList();
		this.getHotelList();
	},
	onLoad(options) {
		let that = this;
		that.address();
		let customer = JSON.parse(localStorage.getItem('customer'));
		if (customer) {
			//  console.log(customer);
			// 存入本地后new Date会转化为字符串会导致日历无法显示 需重新赋值
			customer.minDate = new Date(2021, 0, 1);
			customer.maxDate = new Date(2052, 0, 1);
			Object.assign(that.$data, customer);
		}
	},
	onShow(e) {
		// #ifdef H5

		// #endif

		// #ifdef APP-PLUS
		uni.$on('globleEvent', rel => {
			this.holetData.value = rel.hotelFrom;
			this.holetData.id = rel.hotelID;
		});
		uni.$on('customer', rel => {
			this.customerData.value = rel.customerFrom;
			this.customerData.id = rel.customerID;
		});
		// #endif
	},
	//返回监听
	onBackPress(e) {
		let that = this;
		data = {
			news_type: that.messageIndex, //信息类型
			news_id: that.messageId, //信息类型id
			source_id: that.customerData.id, //客资来源id
			source_text: that.customerData.value, //客资来源value
			realname: that.customer_name, //客户名称
			city_id: [that.timesIndex[0], that.timesIndex[1]], //城市
			city: that.city, //城市
			zone: that.zone, //区域
			mobile: that.phone, //手机号
			mobile1: that.otherPhone, //其他联系
			hotel_id: that.holetData.id, //咨询酒店id
			hotel_text: that.holetData.value, //咨询酒店value
			remark: that.remark, //备注
			banquet_size: that.table1, //桌数
			banquet_size_end: that.table2, //桌数
			budget: that.money1, //预算
			budget_end: that.money2, //预算
			wedding_date: that.weddingDate //婚礼日期
		};
		if (e.from == 'navigateBack' || e.form == 'backbutton') {
			that.$refs.popups.open();
			return true; //阻止默认返回行为
		}
	},
	beforeMount() {
		this.dictionary = dictionary;
	},
	methods: {
		// 获取客资来源列表
		getSourceList() {
			let that = this;
			sun.request({
				url: '/api/dictionary.picker/source',
				token: true,
				data: {},
				success(res) {
					if (res.code == 200) {
						that.sourceList = res.data.sourceList;
					}
				},
				fail(e) {
					uni.showToast({
						icon: 'none',
						title: '服务器开小差去啦~'
					});
				}
			});
		},
		// 获取酒店列表
		getHotelList() {
			let that = this;
			sun.request({
				url: '/api/dictionary.picker/hotel',
				token: true,
				data: {},
				success(res) {
					if (res.code == 200) {
						that.hotelList = res.data.hotelList;
					}
				},
				fail(e) {
					uni.showToast({
						icon: 'none',
						title: '服务器开小差去啦~'
					});
				}
			});
		},
		// 客资来源相关筛选
		filterAccountMes() {
			if (this.customerData.id) {
				this.account_city_id = '';
				this.account_id = '';
				this.accountCity = [];
				this.accountList = [];
				this.showCity = false;
				let accountSourceList = [];
				let cityArr = [];
				this.accountPickerList.forEach((item, index) => {
					if (item.source_id == this.customerData.id) {
						accountSourceList.push(item);
					}
				});
				this.accountSourceList = accountSourceList;
				// console.log(this.accountSourceList);
				this.accountSourceList.forEach((item, index) => {
					cityArr.push(item.city_id);
				});
				// 城市去重
				cityArr.sort();
				let newCityArr = [cityArr[0]];
				for (var i = 0; i < cityArr.length; i++) {
					if (cityArr[i] !== newCityArr[newCityArr.length - 1]) {
						newCityArr.push(cityArr[i]);
					}
				}
				this.accountCity = newCityArr;
				// console.log(this.accountCity);
				// 获取来源区域picker
				let region = dictionary.getPicker('cityList');
				let accountCityPicker = [];
				if (this.accountCity[0] == 0) {
					accountCityPicker.push({
						id: 0,
						title: '无'
					});
				}
				region.forEach((item, index) => {
					this.accountCity.forEach((id, index) => {
						if (item.id == id) {
							accountCityPicker.push(item);
						}
					});
				});
				this.accountCityPicker = accountCityPicker;
				// 没有区域直接选账号
				if (this.accountCity.length == 1 && this.accountCity[0] == 0) {
					console.log(this.accountCity);
					this.accountList = this.accountSourceList;
					if (this.accountList.length) {
						this.showCity = true;
					}
				}
				// 区域只有无并且无匹配账号
				if (this.accountCity.length == 1 && !this.accountCity[0] && !this.accountList.length) {
					this.showCity = true;
				}
			}
		},
		// 返回上个页
		onClickLeft() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 选择信息类型
		chooseMeType(row) {
			this.messageId = row.id;
			this.meTypeTitle = row.title;
			this.showPicker = false;
		},
		// 选择所在城市
		chooseRegion(row, index) {
			// console.log(row,index);
			this.regionSelect = row + '';
			this.regionIndex = index[0];
			this.zoneIndex = index[1];
			this.showRegion = false;
		},
		// 婚期选择
		confirmWeddingData(date) {
			this.weddingDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
			this.showCalendar = false;
		},
		// 选择客资来源区域 匹配相应账户
		chooseAccountCity(row) {
			this.accountRegionTitle = row.title;
			this.account_city_id = row.id;
			this.accountTitle = '';
			this.account_id = '';
			let accountList = [];
			//   console.log(this.accountSourceList);
			this.accountSourceList.forEach((item, index) => {
				if (item.city_id == row.id && item.source_id == this.customerData.id) {
					accountList.push(item);
				}
			});
			this.accountList = accountList;
			//   console.log(this.accountList);
			this.showAccountRegion = false;
		},
		// 选择客资来源账号picker
		chooseAccount(row) {
			this.accountTitle = row.title;
			this.account_id = row.id;
			this.showAccount = false;
		},
		// 选择客户来源账号弹窗筛选
		filterAccount() {
			this.showFilter = true;
			this.dataList = this.accountList;
			this.filterType = 'account';
		},
		// 联系方式类型
		chooseContactType(row) {
			// console.log(row);
			this.contactTitle = row.title;
			this.contact_type = row.type;
			this.showContactType = false;
		},
		// 选择客资来源
		selectSource() {
			this.accountRegionTitle = '';
			this.accountTitle = '';
			this.showFilter = true;
			this.dataList = this.sourceList;
			this.filterType = 'sourceAccount';
		},
		//跳转酒店搜索
		selectHotel() {
			this.showFilter = true;
			this.dataList = this.hotelList;
			this.filterType = 'hotel';
			// let origin='customer'
			// 	uni.navigateTo({
			// 		url:'../searchHotel/searchHotel?origin='+origin
			// 	})
		},
		//保存修改信息
		confirms() {
			let that = this;
			localStorage.setItem('customer', JSON.stringify(that.$data));
			uni.switchTab({
				url: '../customer/list'
			});
			that.$refs.popups.close();
		},
		// 取消缓存
		closes() {
			let that = this;
			localStorage.removeItem('customer');
			uni.switchTab({
				url: '../customer/list'
			});
			that.$refs.popups.close();
		},
		// 双列联动初始化
		showTwoPicker_linkage() {
			this.mode = 'two_linkage';
			this.pickerList = this.region;
			this.defaultIndex = [0, 0];
			this.$refs.wzpPicker.showPicker();
		},
		//获取客人姓名
		getCustomerName(value) {
			// console.log(value);
			this.customer_name = value;
			// console.log(this.customer_name);
		},
		//获取客人手机号
		getCustomerPhone(event) {
			var that = this;
			that.phone = that.phone.replace(/[, ]/g, '');
			//判断手机号是否存在
			sun.request({
				url: '/h5/customer.customer/unique',
				// showLoading: true,
				token: true,
				data: {
					mobile: that.phone
				},
				success(res) {
					if (res.code == 200) {
						that.isDisabled = false;
						uni.showToast({
							icon: 'none',
							title: res.msg,
							duration: 5000
						});
					} else if (res.code == 400) {
						that.isDisabled = true;
						uni.showToast({
							icon: 'none',
							title: res.msg,
							duration: 5000
						});
					}
				},
				fail(e) {}
			});
		},
		//获取其他联系
		getOtherPhone(value) {
			this.otherPhone = value;
			this.otherPhone = this.otherPhone.replace(/[, ]/g, '');
		},
		//获取备注
		getRemark(row) {
			this.remark = row;
		},
		//获取桌数1
		getTable1(row) {
			this.table1 = row;
		},
		//获取桌数2
		getTable2(row) {
			this.table2 = row;
		},
		//获取预算1
		getMoney1(row) {
			this.money1 = row;
		},
		//获取预算2
		getMoney2(row) {
			this.money2 = row;
		},
		//删除信息类型
		deleteMessage() {
			this.messageIndex = 0;
		},
		//选择婚礼日期
		weddingDateChange(e) {
			this.weddingDate = e.key;
		},
		//时间选择
		btnCancel() {
			console.log('取消时间：');
		},
		//删除婚礼日期
		deleteWeddingDate() {
			this.weddingDate = '';
		},
		address() {
			let that = this;
			sun.request({
				url: '/h5/dictionary.region/getRegion',
				showLoading: true,
				token: true,
				data: {},
				success(res) {
					if (res.code == 200) {
						that.region = res.data.region;
						that.pickerList = that.region;
						that.region.map((item, index) => {
							that.regionArry[0].push(item);
							if (index == 0) {
								// that.regionArry[1]=that.zone?that.zone:item.items
								if (!this.zone) {
									that.regionArry[1] = item.items;
								} else {
									that.regionArry[1] = that.zone;
								}
							}
						});
					}
				},
				fail(e) {}
			});
		},
		//删除城市
		deleteCity() {
			this.timesIndex = [0, 0];
			this.city = '';
			// this.isShow=true;
		},

		//删除客资
		deleteCustomerFrom() {
			// this.customerData={};
			this.customerData.value = '';
			this.customerData.id = '';
		},

		deleteHotel() {
			// this.holetData={}
			this.holetData.value = '';
			this.holetData.id = '';
		},
		//保存客资信息
		saveCustomer() {
			let that = this;
			if (that.meTypeTitle == '') {
				uni.showToast({
					icon: 'none',
					title: '请选择信息类型'
				});
				return;
			}
			if (!that.customerData.value) {
				uni.showToast({
					icon: 'none',
					title: '请输入客资来源'
				});
				return;
			}
			if (that.accountCity.length && !that.showCity) {
				if (that.accountRegionTitle == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入客资来源区域'
					});
					return;
				}
			}
			if (that.accountList.length) {
				if (that.accountTitle == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入客资来源账户'
					});
					return;
				}
			}
			if (!that.phone) {
				uni.showToast({
					icon: 'none',
					title: '请输入联系电话'
				});
				return;
			}
			if (that.regionSelect == '') {
				uni.showToast({
					icon: 'none',
					title: '请选择城市'
				});
				return;
			}
			that.isDisabled = true;
			sun.request({
				url: '/h5/Customer.Customer/doCreate',
				// showLoading: true,
				token: true,
				data: {
					news_type: that.messageId, //信息类型
					source_id: that.customerData.id, //客资来源
					account_city_id: that.account_city_id, //客资来源区域
					account_id: that.account_id, //客资来源账户
					realname: that.customer_name, //客户名称
					// city_id:that.pickerList[that.timesIndex[0]].id,   //城市
					city_id: that.pickerList[that.regionIndex].id,
					contact_type: that.contact_type, //联系类型
					mobile: that.phone, //手机号
					mobile1: that.otherPhone, //其他联系
					// zone:that.pickerList[that.timesIndex[0]].children[that.timesIndex[1]].title,   //区域
					zone: that.pickerList[that.regionIndex].children[that.zoneIndex].title,
					hotel_id: that.holetData.id ? that.holetData.id : '', //咨询酒店
					hotel_text: that.holetData.value ? that.holetData.value : '', //酒店
					remark: that.remark, //备注
					banquet_size: that.table1, //桌数
					banquet_size_end: that.table2, //桌数
					budget: that.money1, //预算
					budget_end: that.money2, //预算
					wedding_date: that.weddingDate //婚礼日期
				},
				success(res) {
					if (res.code == 200) {
						//添加成功 删除本地缓存
						let customer = JSON.parse(localStorage.getItem('customer'));
						if (customer) {
							localStorage.removeItem('customer');
						}
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
						//添加成功
						uni.switchTab({
							url: '../customer/list'
						});
					} else {
						that.isDisabled = false;
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				},
				fail(e) {}
			});
		}
	}
};
</script>

<style lang="less">
// 为不影响公共样式
page {
	padding-top: 0 !important;
	padding-bottom: 120upx;
}

.nav {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
}

.icon {
	position: absolute;
	right: 2%;
	top: 50%;
	transform: translateY(-50%);
}

.active {
	color: #333333 !important;
}

.line {
	width: 100%;
	height: 16upx;
	background: #f6f6f6;
}

.content {
	padding-top: 46px;
	box-sizing: border-box;
	width: 100%;
	height: auto;
}

.content .customer_info {
	width: 100%;
	height: auto;
	position: relative;

	.box {
		width: 100%;
		padding: 20upx 32upx;
		box-sizing: border-box;
		border-bottom: 1upx solid #eeeeee;
		font-size: 30upx;
		display: flex;
		justify-content: space-between;
		position: relative;

		text {
			width: auto;
			text-align: right;
			color: #333333;
		}

		input {
			width: auto;
			text-align: right;
			color: #333333;
		}

		.t2 {
			width: auto;
			text-align: right;
			color: #333333;
		}

		.choose {
			width: auto;
			display: flex;

			text {
				width: auto;
				font-size: 30upx;
				color: #999999;
				margin-right: 20upx;
			}

			image {
				width: 40upx;
				height: 40upx;
			}
		}
	}
}

.boxs {
	width: 100%;
	padding: 20upx 32upx;
	box-sizing: border-box;
	border-bottom: 1upx solid #eeeeee;
	font-size: 30upx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	text {
		width: auto;
		color: #333333;
	}
}

.boxs .right {
	width: auto;
	display: flex;
	align-items: center;

	.input {
		width: 62upx !important;
		height: 100%;
		display: block;
		background: rgba(249, 250, 255, 1);
		border-radius: 5upx;
		color: #999999;
		font-size: 30upx;
		text-align: center;
	}

	.input1 {
		margin-right: 24upx;
	}

	text {
		margin-right: 24upx;
	}

	.budget {
		width: 120upx !important;
		display: block;
		background: rgba(249, 250, 255, 1);
		border-radius: 5upx;
		color: #999999;
		font-size: 30upx;
		text-align: center;
	}
}

.content .customer_info .remark {
	width: 100%;
	min-height: 154upx;
	padding: 36upx 32upx 36upx 32upx;
	box-sizing: border-box;
	border-bottom: 1upx solid #eeeeee;
	display: flex;
	justify-content: space-between;

	text {
		width: 60upx;
		font-size: 30upx;
		color: #333333;
	}

	textarea {
		width: 560upx !important;
		min-height: 112upx;
		display: block;
		font-size: 28upx;
		color: #999999;
	}
}

.btn {
	width: 100%;
	position: fixed;
	bottom: 0;
	padding: 30upx;
	box-sizing: border-box;
	background: #ffffff;
	z-index: 10;

	button {
		width: 80%;
		height: 80upx;
		background: #406ceb;
		border-radius: 60upx;
		color: #ffffff;
		font-size: 30upx;
		line-height: 80upx;
	}
}

//门店列表弹框
.shop_list1:after {
	content: '';
	width: 0;
	height: 0;
	border: 7px solid transparent;
	border-bottom-color: #f4f4f4;
	position: absolute;
	right: 20upx;
	top: -14px;
}

.shop_list1 {
	max-height: 400upx;
	padding: 20upx;
	position: absolute;
	right: 20px;
	top: 15%;
	background: #f4f4f4;
	border-radius: 10upx;
	z-index: 5;

	.shop_mian {
		max-height: 200upx;
		width: 100%;
		font-size: 28upx;

		.shop_title {
			padding: 10upx 0;
			border-bottom: 1upx solid #cccccc;
		}
	}
}

//门店列表弹框
.shop_list:after {
	content: '';
	width: 0;
	height: 0;
	border: 7px solid transparent;
	border-bottom-color: #f4f4f4;
	position: absolute;
	right: 20upx;
	top: -14px;
}

.shop_list {
	max-height: 400upx;
	padding: 20upx;
	position: absolute;
	right: 20px;
	top: 50%;
	background: #f4f4f4;
	border-radius: 10upx;
	z-index: 5;

	.shop_mian {
		max-height: 200upx;
		width: 100%;
		font-size: 28upx;

		.shop_title {
			padding: 10upx 0;
			border-bottom: 1upx solid #cccccc;
		}
	}
}

.centerLine {
	width: 100%;
	height: 100%;
	padding-top: 6px;
	box-sizing: border-box;
}

.van-goods-action {
	padding-bottom: 12px;
	box-sizing: border-box;
}

.form_line {
	padding: 0 16px;
	box-sizing: border-box;
	width: 100%;

	.line_bottom {
		width: 100%;
		border-bottom: 1px solid #ebedf0;
		transform: scaleY(0.5);
	}
}
</style>
